<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置页面</title>
    <style>
        /*重置*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #fff;
            color: #333;
        }

        /*返回箭头和标题*/
        .header {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .back-arrow {
            font-size: 24px;
            color: #666;
            text-decoration: none;
            margin-right: 10px;
        }

        .header-title {
            font-size: 18px;
            font-weight: bold;
        }

        /*设置内边距*/
        .content {
            padding: 15px;
        }

        /*分组标题样式*/
        .group-title {
            color: #00bfff;
            font-size: 16px;
            margin-bottom: 10px;
        }

        /*两端对齐*/
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }

        .item-label {
            font-size: 16px;
        }

        .item-value {
            font-size: 15px;
            color: #666;
        }

        /*头像*/
        .avatar-container {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /*退出登录*/
        .logout-btn {
            display: block;
            width: 120px;
            margin: 30px auto;
            padding: 10px;
            text-align: center;
            background-color: #fff;
            color: #f00;
            border: 1px solid #f00;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }

        .logout-btn:hover {
            background-color: #f00;
            color: #fff;
        }
    </style>
</head>

<body>

<div class="header">
    <a href="center.html" class="back-arrow">&lt;</a >
    <h1 class="header-title">设置</h1>
</div>

<div class="content">
    <h2 class="group-title">用户信息</h2>
    <div class="setting-item">
        <span class="item-label">头像</span>
        <div class="avatar-container">
            <img src="微信图片_20250919083431_29_125.jpg" alt="头像" class="avatar">
        </div>
    </div>
    <div class="setting-item">
        <span class="item-label">昵称</span>
        <span class="item-value">人间喵物张q金</span>
    </div>
    <div class="setting-item">
        <span class="item-label">蓝奏云</span>
        <span class="item-value">已授权</span>
    </div>
    <div class="setting-item">
        <span class="item-label">注册邮箱</span>
        <span class="item-value">123456@qq.com</span>
    </div>

    <h2 class="group-title">界面显示</h2>
    <div class="setting-item">
        <span class="item-label">夜间模式</span>
        <span class="item-value">跟随系统</span>
    </div>
    <div class="setting-item">
        <span class="item-label">消息通知</span>
        <span class="item-value">显示</span>
    </div>
    <div class="setting-item">
        <span class="item-label">评分提醒</span>
        <span class="item-value">显示</span>
    </div>
    <div class="setting-item">
        <span class="item-label">后台下载</span>
        <span class="item-value">开启</span>
    </div>

    <h2 class="group-title">下载管理</h2>
    <div class="setting-item">
        <span class="item-label">始终外置下载</span>
        <span class="item-value">关闭</span>
    </div>
    <div class="setting-item">
        <span class="item-label">安装成功后删除APK</span>
        <span class="item-value">开启</span>
    </div>
    <div class="setting-item">
        <span class="item-label">下载完成后调起安装</span>
        <span class="item-value">关闭</span>
    </div>
    <div class="setting-item">
        <span class="item-label">服务器代理解析</span>
        <span class="item-value">关闭</span>
    </div>

    <h2 class="group-title">网站相关</h2>
    <div class="setting-item">
        <span class="item-label">分享百变</span>
        <span class="item-value"></span>
    </div>
    <div class="setting-item">
        <span class="item-label">崩溃日志</span>
        <span class="item-value"></span>
    </div>
    <div class="setting-item">
        <span class="item-label">用户服务协议</span>
        <span class="item-value"></span>
    </div>
    <div class="setting-item">
        <span class="item-label">关于网站</span>
        <span class="item-value"></span>
    </div>

    <span class="tuichu">退出登录</span></div>